<template>
  <div class="yy-screen2">
    <div class="yy-screen2-empl">
      <div class="yy-screen2-empl_list">
        <div class="yy-screen2-empl_list-item" v-if="paging.priorityDept.length > 0 && paging.moreDept.length > 0">
          <DepartmentSection
              :sections="paging.priorityDept[0]"
              :interval="30*1000"
              :width="100"
          />
          <DepartmentSection
              :sections="paging.priorityDept[1]"
              :interval="30*1000"
              :width="100"
          />
          <DepartmentSection
              :sections="paging.moreDept[0]"
              :interval="45*1000"
              :width="69"
          />
        </div>
        <div class="yy-screen2-empl_list-item"  v-if="paging.priorityDept.length > 0 && paging.lessDept.length > 0">
          <DepartmentSection
              :sections="paging.priorityDept[2]"
              :interval="30*1000"
              :width="100"
          />
          <DepartmentSection
              :sections="paging.priorityDept[3]"
              :interval="30*1000"
              :width="100"
          />
          <DepartmentSectionPair
              :sections="paging.lessDept"
              :interval="45*1000"
              :width="69"
          />
        </div>
        <div class="yy-screen2-empl_list-item" v-if="paging.otherDept.length > 0 && PowerPointImg">
          <DepartmentSection
              :sections="paging.otherDept[1]"
              :interval="40*1000"
              :width="100"
          />
          <DepartmentSection
              :sections="paging.otherDept[2]"
              :interval="40*1000"
              :width="100"
          />
          <PowerPoint :images="[PowerPointImg]" :width="68.5" />
        </div>
      </div>
    </div>
    <ScheduleInfo />
  </div>
</template>

<script setup>
import { reactive, onBeforeMount, onBeforeUnmount } from "vue";
import { resetFontSize } from "@/utils/yayi.js";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import ScreenApi from "@/api/screen/ScreenApi";
import WebSocketClient from "@/utils/WebSocketClient";
import { EnvConfig } from "@/utils/index.js";
import { useRoute } from "vue-router";
import { data } from "./data";
import ScheduleInfo from "./components/ScheduleInfo.vue";
import DoctorCard from "./components/DoctorCard.vue";
import DepartmentSection from "./components/DepartmentSection.vue";
import DepartmentSectionPair from "./components/DepartmentSectionPair.vue";
import PowerPoint from "./components/PowerPoint.vue";
import { data as newData } from "./newdata";
import PowerPointImg from "@/assets/images/powerPoint.jpg";
console.log(PowerPointImg)
console.log("newData:::", newData);
const DemoDoctor = {
  doctorName: "测试医生",
  doctorLevelName: "主任医师",
  doctorAbility: "擅长治疗各种疾病。",
  doctorPhoto: "https://picsum.photos/150",
  listCategory: [
    {
      categoryId: 1,
      categoryName: "测试科室",
      listClinicHours: [
        {
          scheduleWeek: 1,
          clinicHoursName: "上午",
        },
      ],
    },
  ],
};
const EmptyDoctor = {
  doctorName: "",
  doctorLevelName: "",
  doctorAbility: "",
  doctorPhoto: "",
  listCategory: [],
};

const route = useRoute();
const weekDay = {
  1: "星期一",
  2: "星期二",
  3: "星期三",
  4: "星期四",
  5: "星期五",
  6: "星期六",
  7: "星期日",
};
const screenWidth = 4368;
const screenHeight = 1664;
let refreshTimeout = null;
let websocketClient = null;

const paging = reactive({
  // 当前返���的所有医生
  employees: [],
  // 每页显示的科室数量
  pageMaxDepart: 9,
  // 分页后的数据
  departData: [],
  priorityDept: [],
  otherDept: [],
  moreDept: [],
  lessDept: []
});

const baseUrl = computed(() => EnvConfig.baseApi);

// 计算缩放比例
onBeforeMount(() => {
  const query = route.query || {};
  resetFontSize(screenWidth, screenHeight);
  window.onresize = function () {
    resetFontSize(screenWidth, screenHeight);
  };
  listScheduleEmpl();

  websocketClient = new WebSocketClient(
    EnvConfig.baseApi,
    query.ip || "192.168.31.226",
    onWebsocketMessage
  );
  startDataRefresh();
});

onBeforeUnmount(() => {
  if (refreshTimeout) {
    clearInterval(refreshTimeout);
  }
});

const startDataRefresh = () => {
  refreshTimeout = setInterval(() => {
    listScheduleEmpl();
  }, 60 * 1000);
};

const onWebsocketMessage = (error, data) => {
  console.log("current websocket message:::", data);
};

const filterDepartData = (scheduleEmployees, doctorSize, page) => {
  let departData = [];
  scheduleEmployees.forEach((se) => {
    const exits = departData.find((item) => item.departId === se.departId);
    if (exits) {
      exits.employees.push(se);
    } else {
      departData.push({
        sort: isNaN(se.departSort) ? 999 : se.departSort,
        departId: se.departId,
        departCode: se.departCode,
        departName: se.departName,
        employees: [se],
      });
    }
  });

  departData.forEach((de) => {
    de.employees = de.employees.sort((a, b) => a.doctorSort - b.doctorSort);
  });
  // 排序
  departData = departData.sort((a, b) => a.sort - b.sort);

  // 分页
  let pageData = [];
  const chunkSize = Math.ceil(departData.length / page);
  for (let i = 0; i < departData.length; i += chunkSize) {
    pageData.push(departData.slice(i, i + chunkSize));
  }

  const pageDataFill = [];
  pageData.forEach((d, index) => {
    pageDataFill[index] = [];
    d.forEach((de, deIndex) => {
      let departData = [];
      const employeeCount = de.employees.length;
      const pageCount = Math.ceil(employeeCount / doctorSize) || 1;
      for (let i = 0; i < pageCount; i++) {
        const startIndex = i * doctorSize;
        const endIndex = startIndex + doctorSize;
        let employees = de.employees.slice(startIndex, endIndex);

        while (employees.length < doctorSize) {
          employees.push({ ...EmptyDoctor });
        }

        departData.push({
          ...de,
          id: `${de.departId}_${deIndex}`,
          employees,
        });
      }
      pageDataFill[index].push(...departData);
    });
  });
  return pageDataFill;
};

const listScheduleEmpl = () => {
  ScreenApi.listScheduleEmpl().then((scheduleEmployees) => {
    console.log('scheduleEmployees---------', scheduleEmployees)
    paging.priorityDept = filterDepartData(
        scheduleEmployees.priorityDept,
        6,
        4
    );
    console.log('priorityDept=========', paging.priorityDept)
    paging.otherDept = filterDepartData(scheduleEmployees.otherDept, 6, 3);
    paging.moreDept = filterDepartData(scheduleEmployees.moreDept, 4, 1);
    paging.lessDept = filterDepartData(scheduleEmployees.lessDept, 2, 2);
  })
};

const refresh = () => {
  window.location.reload();
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/yy.scss";
</style>
